<template>
    <div>
        <el-card class="box-card">

            <!-- 查询 -->
            <el-form :inline="true" :model="xqobj" class="demo-form-inline">
                <el-form-item label="仓库" style="width: 257px;">
                    <el-select v-model="xqobj.wuliao" placeholder="请选择">
                    </el-select>
                </el-form-item>
                <el-form-item label="物料" style="width: 257px;">
                    <el-select v-model="xqobj.wuliao" placeholder="请选择">
                    </el-select>
                </el-form-item>
                <el-form-item label="批次" v-if="sx">
                    <el-col :span="11">
                        <el-input v-model="xqobj.batch_no" placeholder="请输入最小值" style="width: 100%;"></el-input>
                    </el-col>
                    <el-col class="line" :span="2">~</el-col>
                    <el-col :span="11">
                        <el-input v-model="xqobj.batch_no" placeholder="请输入最大值" style="width: 100%;"></el-input>
                    </el-col>
                </el-form-item>
                <el-form-item label="供应商" style="width: 265px;" v-if="sx">
                    <el-select v-model="xqobj.wuliao" placeholder="请选择">
                    </el-select>
                </el-form-item>
                <el-form-item label="已关闭" style="width: 257px;" v-if="sx">
                    <template>
                        <el-select v-model="xqobj.isClosed" placeholder="请选择" style="width: 100px;">
                            <el-option v-for="item in list" :key="item.val" :label="item.val" :value="item.id">
                            </el-option>
                        </el-select>
                    </template>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" icon="el-icon-search" @click="get">查询</el-button>
                    <el-button icon="el-icon-refresh-right" @click="chongzhi">重置</el-button>
                    <span class="el-icon-arrow-down shouqi" @click="zk" style="color: #1890ff;" v-if="!sx">展开</span>
                    <span class="el-icon-arrow-up shouqi" @click="zk" style="color: #1890ff;" v-if="sx">收起</span>
                </el-form-item>
            </el-form>

            <download-excel :data='tablelist' :fields='json_fields' :name='`详细库存.xlsx`' class="daochu"
                style="display: inline-block;">
                <span class="el-icon-download" style="color: #1890ff; margin: 0px 10px;">导出</span>
            </download-excel>
            <span class="el-icon-folder-add" style="color: #1890ff;margin: 0px 10px;">导入</span>
            <div style=" display: inline-table;">已选择<span style="color: #1890ff;">{{ this.duoxuan.length }}</span>项
            </div>
            <div style=" display: inline-table;color: #1890ff;margin-left: 20px;" v-if="qkbt" @click="toggleSelection">
                清空</div>

            <!-- 自定义列 -->
            <el-popover placement="left" width="400" trigger="click">
                <span>自定义列</span>
                <hr>
                <div class="kuang" style="display: flex; justify-content: space-around">
                    <div style="width: 60px;">
                        <el-checkbox label="#" v-model="type1" disabled></el-checkbox>
                        <el-checkbox label="物料名称" v-model="type[1].type"></el-checkbox>
                        <el-checkbox label="批次" v-model="type[3].type"></el-checkbox>
                        <el-checkbox label="单位" v-model="type[5].type"></el-checkbox>
                        <el-checkbox label="金额" v-model="type[7].type"></el-checkbox>
                        <el-checkbox label="单个供应商" v-model="type[9].type"></el-checkbox>
                        <el-checkbox label="已关闭" v-model="type[11].type"></el-checkbox>
                        <el-checkbox label="创建部门" v-model="type[13].type"></el-checkbox>
                        <el-checkbox label="修改时间" v-model="type[15].type"></el-checkbox>
                        <!-- <el-checkbox label="制单时间" v-model="selectedColumns"></el-checkbox>
                        <el-checkbox label="制单部门" v-model="selectedColumns"></el-checkbox>
                        <el-checkbox label="修改人" v-model="selectedColumns"></el-checkbox> -->
                    </div>
                    <div style="width: 60px;">
                        <el-checkbox label="物料编码" v-model="type[0].type"></el-checkbox>
                        <el-checkbox label="规格型号" v-model="type[2].type"></el-checkbox>
                        <el-checkbox label="仓库" v-model="type[4].type"></el-checkbox>
                        <el-checkbox label="数量" v-model="type[6].type"></el-checkbox>
                        <el-checkbox label="单位金额" v-model="type[8].type"></el-checkbox>
                        <el-checkbox label="最后供应商" v-model="type[10].type"></el-checkbox>
                        <el-checkbox label="创建时间" v-model="type[12].type"></el-checkbox>
                        <el-checkbox label="创建人" v-model="type[14].type"></el-checkbox>
                        <el-checkbox label="修改人" v-model="type[16].type"></el-checkbox>
                        <!-- <el-checkbox label="制单人" v-model="selectedColumns"></el-checkbox>
                        <el-checkbox label="修改时间" v-model="selectedColumns"></el-checkbox> -->
                        <el-checkbox label="操作" v-model="type1" disabled></el-checkbox>
                    </div>
                </div>
                <el-button slot="reference" style="float: right; border: none; color: #1890ff;"><i
                        class="el-icon-setting" style="color: #1890ff;"></i>自定义列</el-button>
            </el-popover>

            <!-- 表格 -->
            <el-table :data="tablelist" border style="width: 100%;margin-top: 10px;" @selection-change="dxk"
                :default-sort="{ prop: 'date', order: 'descending' }" ref="multipleTable">
                <el-table-column fixed type="selection" width="55">
                </el-table-column>
                <el-table-column fixed type="index" label="#"> </el-table-column>
                <el-table-column v-if="type[0].type" fixed prop="materialCode" label="物料编码" width="150" sortable
                    @click="xq">
                    <template slot-scope="scope">
                        <span @click="xq(scope.row)" style="color: #57a1ff;">{{ scope.row.materialCode }}</span>
                    </template>
                </el-table-column>
                <el-table-column v-if="type[1].type" fixed prop="materialId_dictText" label="物料名称" width="150" sortable>
                </el-table-column>
                <el-table-column v-if="type[2].type" prop="materialModel" label="规格型号" width="150">
                </el-table-column>
                <el-table-column v-if="type[3].type" prop="batchNo" label="批次" width="200">
                </el-table-column>
                <el-table-column v-if="type[4].type" prop="warehouseId_dictText" label="仓库" width="200">
                </el-table-column>
                <el-table-column v-if="type[5].type" prop="unitId_dictText" label="单位" width="120">
                </el-table-column>
                <el-table-column v-if="type[6].type" prop="qty" label="数量" width="150">
                </el-table-column>
                <el-table-column v-if="type[7].type" prop="cost" label="金额" width="120">
                </el-table-column>
                <el-table-column v-if="type[8].type" prop="unitCost" label="单位金额" width="150">
                </el-table-column>
                <el-table-column v-if="type[9].type" prop="isSingleSupplier_dictText" label="单个供应商" width="120">
                </el-table-column>
                <el-table-column v-if="type[10].type" prop="supplierId_dictText" label="最后供应商" width="200">
                </el-table-column>
                <el-table-column v-if="type[11].type" prop="isClosed_dictText" label="已关闭" width="75">
                </el-table-column>
                <el-table-column v-if="type[12].type" prop="createTime_ymd" label="创建时间" width="120">
                </el-table-column>
                <el-table-column v-if="type[13].type" prop="sysOrgCode_dictText" label="创建部门" width="120">
                </el-table-column>
                <el-table-column v-if="type[14].type" prop="createBy_dictText" label="创建人" width="120">
                </el-table-column>
                <el-table-column v-if="type[15].type" prop="updateTime_ymd" label="修改时间" width="150">
                </el-table-column>
                <el-table-column v-if="type[16].type" prop="updateBy_dictText" label="修改人" width="120">
                </el-table-column>
                <el-table-column  fixed="right" prop="zip" label="操作" width="120">
                    <template slot-scope="scope">
                        <span style="padding-right: 5px;border-right:2px solid #e8e8e8 ;color: #1890ff;"
                            @click="bj(scope.row)">编辑</span>
                        <el-dropdown>
                            <span class="el-dropdown-link" style="margin-left: 5px;color: #1890ff;">
                                更多<i class="el-icon-arrow-down el-icon--right"></i>
                            </span>
                            <el-dropdown-menu slot="dropdown">
                            </el-dropdown-menu>
                        </el-dropdown>
                    </template>
                </el-table-column>
            </el-table>
            <div class="block">
                <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                    :current-page="currentPage" :page-sizes="[10, 20, 30, 40]" :page-size="100"
                    layout="total, sizes, prev, pager, next, jumper" :total="total">
                </el-pagination>
            </div>
        </el-card>
        <!-- 抽屉1 -->
        <el-drawer :visible.sync="drawer1" :with-header="false">
            <el-scrollbar wrap-class="scrollbar-wrap" style="height: calc(100vh - 56px);">
                <el-card class="box-card" style="">

                    <div slot="header" class="clearfix">
                        <span style="display: inline-block; ">详细库存-详情</span>
                        <el-button style="display:inline-block;margin-left: 300px; " type="text"
                            @click="drawer1 = false">X</el-button>
                    </div>
                    <div class="text item">
                        <el-form ref="xqobj" :model="xqobj" :rules="rules" label-width="80px" size="small">
                            <el-form-item label="物料编码:" label-width="97px">
                                <el-input v-model="xqobj.materialCode" :disabled="true"></el-input>
                            </el-form-item>
                            <el-form-item label="物料名称:" label-width="97px">
                                <el-select v-model="xqobj.materialId_dictText" placeholder="请选择活动区域"
                                    style="width: 100%;" :disabled="true">
                                    <el-option label="区域一" value="shanghai"></el-option>
                                    <el-option label="区域二" value="beijing"></el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item label="规格型号:" label-width="97px">
                                <el-input v-model="xqobj.materialModel" :disabled="true"></el-input>
                            </el-form-item>
                            <el-form-item label="批次:" label-width="97px">
                                <el-input v-model="xqobj.batchNo" :disabled="true"></el-input>
                            </el-form-item>
                            <el-form-item label="仓库:" label-width="97px">
                                <el-select v-model="xqobj.warehouseId_dictText" placeholder="请选择活动区域"
                                    style="width: 100%;" :disabled="true">
                                    <el-option label="区域一" value="shanghai"></el-option>
                                    <el-option label="区域二" value="beijing"></el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item label="单位:" label-width="97px">
                                <el-select v-model="xqobj.unitId_dictText" placeholder="请选择活动区域" style="width: 100%;"
                                    :disabled="true">
                                    <el-option label="区域一" value="shanghai"></el-option>
                                    <el-option label="区域二" value="beijing"></el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item label="数量:" label-width="97px">
                                <el-input v-model="xqobj.qty" :disabled="true"></el-input>
                            </el-form-item>
                            <el-form-item label="金额:" label-width="97px">
                                <el-input v-model="xqobj.cost" :disabled="true"></el-input>
                            </el-form-item>
                            <el-form-item label="单位金额:" label-width="97px">
                                <el-input v-model="xqobj.unitCost" :disabled="true"></el-input>
                            </el-form-item>
                            <el-form-item label="单个供应商:" label-width="97px" prop="name">
                                <el-select v-model="xqobj.isClosed_dictText" placeholder="请选择活动区域" style="width: 100%;"
                                    :disabled="true">
                                    <el-option label="区域一" value="shanghai"></el-option>
                                    <el-option label="区域二" value="beijing"></el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item label="最后供应商:" label-width="97px">
                                <el-select v-model="xqobj.supplierId_dictText" placeholder="请选择活动区域"
                                    style="width: 100%;" :disabled="true">
                                    <el-option label="区域一" value="shanghai"></el-option>
                                    <el-option label="区域二" value="beijing"></el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item label="已关闭:" label-width="97px" prop="name">
                                <el-select v-model="xqobj.isClosed_dictText" placeholder="请选择活动区域" style="width: 100%;"
                                    :disabled="true">
                                    <el-option label="区域一" value="shanghai"></el-option>
                                    <el-option label="区域二" value="beijing"></el-option>
                                </el-select>
                            </el-form-item>
                            <span class="el-icon-arrow-right" v-if="!ctsx" @click="ctzk"
                                style="margin-bottom: 20px;">操作信息</span>
                            <span class="el-icon-arrow-down" v-if="ctsx" @click="ctzk"
                                style="margin-bottom: 20px;">操作信息</span>
                            <el-form-item label="创建时间:" label-width="97px" v-if="ctsx">
                                <el-date-picker v-model="xqobj.createTime" type="date" placeholder="选择日期"
                                    :disabled="true">
                                </el-date-picker>
                            </el-form-item>
                            <el-form-item label="创建部门:" label-width="97px" v-if="ctsx">
                                <el-select v-model="xqobj.sysOrgCode_dictText" placeholder="请选择活动区域"
                                    style="width: 100%;" :disabled="true">
                                </el-select>
                            </el-form-item>
                            <el-form-item label="创建人:" label-width="97px" v-if="ctsx">
                                <el-select v-model="xqobj.createBy_dictText" placeholder="请选择活动区域" style="width: 100%;"
                                    :disabled="true">
                                </el-select>
                            </el-form-item>
                            <el-form-item label="修改时间:" label-width="97px" v-if="ctsx">
                                <el-date-picker v-model="xqobj.updateTime" type="date" placeholder="选择日期"
                                    :disabled="true">
                                </el-date-picker>
                            </el-form-item>
                            <el-form-item label="修改人:" label-width="97px" v-if="ctsx">
                                <el-select v-model="xqobj.updateBy_dictText" placeholder="请选择活动区域" style="width: 100%;"
                                    :disabled="true">
                                </el-select>
                            </el-form-item>
                        </el-form>
                    </div>
                </el-card>
            </el-scrollbar>
            <el-button style="margin-top: 10px;margin-right: 10px;float: right;" @click="drawer1 = false">关闭</el-button>
        </el-drawer>
        <!-- 抽屉2 -->
        <el-drawer :visible.sync="drawer2" :with-header="false">
            <el-scrollbar wrap-class="scrollbar-wrap" style="height: calc(100vh - 56px);">
                <el-card class="box-card" style="">
                    <div slot="header" class="clearfix">
                        <span style="display: inline-block; ">详细库存-详情</span>
                        <el-button style="display:inline-block;margin-left: 300px; " type="text"
                            @click="drawer2 = false">X</el-button>
                    </div>
                    <div class="text item">
                        <el-form ref="bjobj" :model="bjobj" :rules="rules" label-width="80px" size="small">
                            <el-form-item label="物料编码:" label-width="97px">
                                <el-input v-model="bjobj.materialCode" :disabled="true"></el-input>
                            </el-form-item>
                            <el-form-item label="物料名称:" label-width="97px">
                                <el-select v-model="bjobj.materialId_dictText" placeholder="请选择活动区域"
                                    style="width: 100%;" :disabled="true">
                                    <el-option label="区域一" value="shanghai"></el-option>
                                    <el-option label="区域二" value="beijing"></el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item label="规格型号:" label-width="97px">
                                <el-input v-model="bjobj.materialModel" :disabled="true"></el-input>
                            </el-form-item>
                            <el-form-item label="批次:" label-width="97px">
                                <el-input v-model="bjobj.batchNo" :disabled="true"></el-input>
                            </el-form-item>
                            <el-form-item label="仓库:" label-width="97px">
                                <el-select v-model="bjobj.warehouseId_dictText" placeholder="请选择活动区域"
                                    style="width: 100%;" :disabled="true">
                                    <el-option label="区域一" value="shanghai"></el-option>
                                    <el-option label="区域二" value="beijing"></el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item label="单位:" label-width="97px">
                                <el-select v-model="bjobj.unitId_dictText" placeholder="请选择活动区域" style="width: 100%;"
                                    :disabled="true">
                                    <el-option label="区域一" value="shanghai"></el-option>
                                    <el-option label="区域二" value="beijing"></el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item label="数量:" label-width="97px">
                                <el-input v-model="bjobj.qty" :disabled="true"></el-input>
                            </el-form-item>
                            <el-form-item label="金额:" label-width="97px">
                                <el-input v-model="bjobj.cost" :disabled="true"></el-input>
                            </el-form-item>
                            <el-form-item label="单位金额:" label-width="97px">
                                <el-input v-model="bjobj.unitCost" :disabled="true"></el-input>
                            </el-form-item>
                            <el-form-item label="单个供应商:" label-width="97px" prop="name">
                                <el-select v-model="bjobj.isSingleSupplier_dictText" placeholder="请选择活动区域"
                                    style="width: 100%;">
                                    <el-option v-for="item in list" :key="item.val" :label="item.val" :value="item.val">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item label="最后供应商:" label-width="97px">
                                <el-select v-model="bjobj.supplierId_dictText" placeholder="请选择活动区域"
                                    style="width: 100%;" :disabled="true">
                                </el-select>
                            </el-form-item>
                            <el-form-item label="已关闭:" label-width="97px" prop="name">
                                <el-select v-model="bjobj.isClosed_dictText" placeholder="请选择活动区域" style="width: 100%;">
                                    <el-option v-for="item in list" :key="item.val" :label="item.val" :value="item.val">
                                    </el-option>
                                </el-select>

                            </el-form-item>
                            <span class="el-icon-arrow-right" v-if="!ctsx" @click="ctzk"
                                style="margin-bottom: 20px;">操作信息</span>
                            <span class="el-icon-arrow-down" v-if="ctsx" @click="ctzk"
                                style="margin-bottom: 20px;">操作信息</span>
                            <el-form-item label="创建时间:" label-width="97px" v-if="ctsx">
                                <el-date-picker v-model="bjobj.createTime" type="date" placeholder="选择日期"
                                    :disabled="true">
                                </el-date-picker>
                            </el-form-item>
                            <el-form-item label="创建部门:" label-width="97px" v-if="ctsx">
                                <el-select v-model="bjobj.sysOrgCode_dictText" placeholder="请选择活动区域"
                                    style="width: 100%;" :disabled="true">
                                </el-select>
                            </el-form-item>
                            <el-form-item label="创建人:" label-width="97px" v-if="ctsx">
                                <el-select v-model="bjobj.createBy_dictText" placeholder="请选择活动区域" style="width: 100%;"
                                    :disabled="true">
                                </el-select>
                            </el-form-item>
                            <el-form-item label="修改时间:" label-width="97px" v-if="ctsx">
                                <el-date-picker v-model="bjobj.updateTime" type="date" placeholder="选择日期"
                                    :disabled="true">
                                </el-date-picker>
                            </el-form-item>
                            <el-form-item label="修改人:" label-width="97px" v-if="ctsx">
                                <el-select v-model="bjobj.updateBy_dictText" placeholder="请选择活动区域" style="width: 100%;"
                                    :disabled="true">
                                </el-select>
                            </el-form-item>
                        </el-form>
                    </div>
                </el-card>
            </el-scrollbar><el-button style="margin-top: 10px;margin-right: 20px;float: right;" type="primary"
                @click="tj">确定</el-button>
            <el-button style="margin-top: 10px;margin-right: 30px;float: right;" @click="drawer2 = false">取消</el-button>

        </el-drawer>
    </div>

</template>

<script>
import { GetList, Edit } from '@/api/inventory/wmb';
import dayjs from 'dayjs';
export default {
    data() {
        return {
            type1:true,
            type: [
                { id: 0, type: true, },
                { id: 1, type: true, },
                { id: 2, type: true, },
                { id: 3, type: true, },
                { id: 4, type: true, },
                { id: 5, type: true, },
                { id: 6, type: true, },
                { id: 7, type: true, },
                { id: 8, type: true, },
                { id: 9, type: true, },
                { id: 10, type: true, },
                { id: 11, type: true, },
                { id: 12, type: true, },
                { id: 13, type: true, },
                { id: 14, type: true, },
                { id: 15, type: true, },
                { id: 16, type: true, },
            ],
            // selectedColumns: ['#', '物料编码', '物料名称', '规格型号', '批次', '仓库', '单位', '数量', '金额', '单位金额', '单个供应商',
            //     '最后供应商', '已关闭',
            //     '创建时间', '创建部门', '创建人', '修改时间', '修改人',
            // ],
            qkbt: false,
            drawer1: false,
            drawer2: false,
            sx: false,
            ctsx: false,
            currentPage: 1,
            tablelist: [],
            total: '',
            pageNo: '1',
            pageSize: '10',
            getform: {
                pageNo: '1',
                pageSize: '10',
            },
            list: [
                { val: '是', id: '1' },
                { val: '否', id: '0' },
            ],
            rules: {
                name: [
                    { required: true, message: '请输入活动名称', trigger: 'blur' },
                    { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
                ],
            },
            xqobj: {},
            bjobj: {
                isSingleSupplier_dictText1: '',
                isClosed_dictText1: ''
            },
            duoxuan: [],
            ids: [],
            // 导出列表
            json_fields: {
                编码: "id",    //常规字段
                物料名称: 'materialId_dictText',
                规格型号: "materialId",
                批次: 'batchNo',
                仓库: 'unitId',
                单位: 'qty',
                数量: 'cost',
                金额: 'isSingleSupplier',
                单位金额: 'supplierId',
                单个供应商: 'isClosed',
                最后供应商: 'sysOrgCode',
                已关闭: 'createBy',
                创建时间: 'createTime',
                创建部门: 'updateBy',
                创建人: "createBy_dictText",
                修改时间: "updateTime",
                修改人: "updateBy_dictText"
            },
        }
    },
    mounted() {
        this.get()
    },

    methods: {
        //取消多选
        toggleSelection(rows) {
            this.$refs.multipleTable.clearSelection();

        },
        //多选框
        dxk(x) {
            // console.log(x);
            this.duoxuan = x
            this.ids = x.map(item => item.id);
            if (this.duoxuan.length != 0) {
                this.qkbt = true
            }

            if (this.duoxuan.length == 0) {
                this.qkbt = false
            }

        },
        //提交
        async tj() {
            this.bjobj.updateTime = dayjs(new Date()).format('YYYY-MM-DD hh:mm:ss');
            if (this.bjobj.isClosed_dictText == '是') {
                // this.bjobj.isClosed_dictText='是'
                this.bjobj.isClosed = '1'
            } else {
                // this.bjobj.isClosed_dictText='否'
                this.bjobj.isClosed = '0'
            }
            if (this.bjobj.isSingleSupplier_dictText == '是') {
                // this.bjobj.isSingleSupplier_dictText='是'
                this.bjobj.isSingleSupplier = '1'
            } else {
                // this.bjobj.isSingleSupplier_dictText='否'
                this.bjobj.isSingleSupplier = '0'
            }
            let data = await Edit(this.bjobj);
            this.drawer2 = false
            this.$message.success(data.message);
            this.get()

        },
        //详情
        xq(x) {
            this.drawer1 = true
            this.xqobj = x
        },
        //编辑
        bj(x) {
            this.drawer2 = true
            this.bjobj = x
            this.bjobj.isSingleSupplier_dictText1 = this.bjobj.isSingleSupplier_dictText
            this.bjobj.isClosed_dictText1 = this.bjobj.isClosed_dictText
            console.log(this.bjobj);

        },
        //获取列表
        async get() {
            this.xqobj.pageNo = this.pageNo
            this.xqobj.pageSize = this.pageSize
            let data = await GetList(this.xqobj)
            this.tablelist = data.result.records
            this.tablelist.forEach(item => {
                item.createTime_ymd = item.createTime.split(' ')[0]
                item.updateTime_ymd = item.updateTime.split(' ')[0]
            })
            this.total = data.result.total
            // console.log(this.tablelist);

        },
        handleSizeChange(val) {
            this.pageSize = val
            this.pageNo = 1
            this.get()
        },
        handleCurrentChange(val) {
            this.pageNo = val
            this.get()
        },
        //重置
        chongzhi() {
            this.xqobj = {
                pageNo: '1',
                pageSize: '10',
            }
            this.get()
        },

        //展开
        zk() {
            this.sx = !this.sx
        },
        ctzk() {
            this.ctsx = !this.ctsx
        },
    }
}
</script>
<style scoped>
.el-date-editor {
    width: 150px;
}

.line {
    text-align: center;
}

.shouqi {
    margin-left: 10px;
}
</style>